
    import { Col, message, Modal, Row, Space } from 'antd';
    import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
    import { dataProps } from '..';
    import { ProForm, ProFormInstance, ProFormSwitch, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
    import { addApi, selectOneApi, updateApi } from '../services';
    interface CreateFormProps {
        id?: number;
        modalVisible: boolean;
        onCancel: () => void;
    }
    
    const EditModal: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
        const initialValues: dataProps = {
            
                    dictName:"",
                    status:1,
                    comment:"",
        };
    
    
        const { modalVisible, onCancel, id } = props;
        const formRef = useRef<ProFormInstance<dataProps>>();
        const [currentItem, setCurrentItem] = useState<dataProps>(initialValues)
        useEffect(() => {
            if (modalVisible) {
                if (id) {
                    selectOne()
                } else {
                    formRef.current?.resetFields();
                    setCurrentItem(initialValues)
                }
            }
        }, [modalVisible])
    
    
        const selectOne = async () => {
            const hide = message.loading("正在获取详情")
            const res = await selectOneApi(id);
            if (res.code == 200) {
                res.data.status = !!res.data.status
                setCurrentItem(res.data);
                formRef.current?.setFieldsValue(res.data);
    
            }
            hide()
        }
    
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
        }
        return (
            <Modal
                title="编辑"
                width={600}
                open={modalVisible}
                onCancel={() => onCancel()}
                footer={null}
            >
                <ProForm<dataProps>
    
                    formRef={formRef}
                    {...formItemLayout}
                    layout='horizontal'
                    submitter={{
                        render: (props, doms) =>
                            <Row>
                                <Col span={14} offset={4}>
                                    <Space>{doms}</Space>
                                </Col>
                            </Row>
    
                    }}
                    onFinish={async (values) => {
                        values.status = Number(values.status)
                        const hide = message.loading("正在提交！")
                        const submitFun = id ? updateApi : addApi;
                        const subData = {
                            ...values
                        }
                        if (id) {
                            subData.id = id
                        }
    
                        const res = await submitFun(subData)
                        hide()
                        if (res.code != 200) {
    
                        } else {
                            message.success("提交成功")
                            onCancel()
                        }
                    }}
                >
                    <ProFormText
                        name="id"
                        label="id"
                        disabled
                    />
                   
                    <ProFormText
                        name='dictName'
                        label="名称"                        
                    />                
                
                    <ProFormSwitch
                        checkedChildren="开启"
                        unCheckedChildren="关闭"
                        label="状态"
                        name="status"
                        initialValue={true}
                    />
                
                    <ProFormTextArea
                        name='comment'
                        label="描述"
                        placeholder="请输入描述"
                    />
                
    
                </ProForm>
    
    
    
            </Modal>
        );
    };
    
    export default EditModal;
    
        
        
        